<template>
    <div class="login-box">
        <van-nav-bar class="login-tilte" left-arrow @click-left="$router.back(-1)">
        </van-nav-bar>
        <van-tabs v-model="tabIndex">
            <van-tab>
                <div slot="title">
                    {{$t('m.Register')}}
                </div>
                <div class="login-box-inside">
                    <van-button type="default" class="facebook-btn sms-add-style facebook-back" @click="faceBookLogin">
                        <!--<i :style="{backgroundImage: 'url(' + require('../../static/img/images/fb-icon.png') + ')'}" class="facebook-icon"></i>-->
                        <!--<span class="icon" :style="facebookIcon"></span>-->
                        <span class="buttonText">Facebook</span>
                    </van-button>
                    <van-button type="default" class="facebook-btn sms-add-style" @click="smsLogin">
                        <span class="buttonText">SMS</span>
                    </van-button>
                    <div class="terms-policy">
                        <span>{{$t('m.Byregisteringyouagree')}}</span>
                        <router-link to="/help/terms" class="index-page-a">{{$t('m.Termsofuse')}}</router-link>
                        <span>{{$t('m.and')}}</span>
                        <router-link to="/help/policy" class="index-page-a">{{$t('m.Privacypolicy')}}</router-link>.
                    </div>
                </div>
            </van-tab>
            <van-tab>
                <div slot="title">
                    {{$t('m.Login')}}
                </div>
                <div class="login-box-inside">
                    <van-button type="default" class="facebook-btn sms-add-style facebook-back" @click="faceBookLogin">
                        <!--<i :style="{backgroundImage: 'url(' + require('../../static/img/images/fb-icon.png') + ')'}" class="facebook-icon"></i>-->
                        <!--<span class="icon" :style="facebookIcon"></span>-->
                        <span class="buttonText">Facebook</span>
                    </van-button>
                    <van-button type="default" class="facebook-btn sms-add-style" @click="smsLogin">
                        <span class="buttonText">SMS</span>
                    </van-button>
                    <!--<div  @click="faceBookLogintest">localhost test</div>-->

                    <!--账号密码登录-->
                    <van-row class="login-or">
                        <van-col span="8" class="or-outside"></van-col>
                        <van-col span="8" class="or-inside">{{$t('m.or')}}</van-col>
                        <van-col span="8" class="or-outside"></van-col>
                    </van-row>
                    <div class="text-box">
                        <label for="userName" class="label-class">{{$t('m.UserName')}}</label>
                        <input type="text" v-model="userName" @input="setNameError()" id="userName" v-bind:class="{'text-danger': nameError }" class="input-class email-input" />
                        <span v-if="nameError" style="color: #fa5555;">Invalid User Name</span>
                    </div>
                    <div class="password-box"  v-if="!seePassword">
                        <label for="password" class="label-class">{{$t('m.Password')}}</label>
                        <div class="password-inside-box">
                            <input type="password" v-model="password" @input="setPasswordError" id="password" v-bind:class="{'text-danger': passwordError }" class="input-class password-input" />
                            <span class="password-icon" :style="passwordIcon" @click="setSee()"></span>
                        </div>
                        <span v-show="passwordError" style="color: #fa5555;">{{$t('m.Atleastormorecharacters')}}</span>
                        <span v-show="passwordError" style="color: #fa5555;">{{$t('m.Atleastnumber')}}</span>
                    </div>
                    <div class="password-box"  v-else>
                        <label for="password1" class="label-class">{{$t('m.Password')}}</label>
                        <div class="password-inside-box">
                            <input type="text" v-model="password" @input="setPasswordError" id="password1" v-bind:class="{'text-danger': passwordError }" class="input-class password-input" />
                            <span class="password-icon" :style="passwordIcon1" @click="setSee()"></span>
                        </div>
                        <span v-show="passwordError" style="color: #fa5555;">{{$t('m.Atleastormorecharacters')}}</span>
                        <span v-show="passwordError" style="color: #fa5555;">{{$t('m.Atleastnumber')}}</span>
                    </div>
                    <!--<a href="javascript:;" class="login-page-a" @click="forgotShow = true">{{$t('m.ForgotPassword')}}</a>-->
                    <div class="login-btn">
                        <van-button size="large" class="btn" @click="loginWithUserName()" :disabled="loading"><van-loading class="login-loading" type="spinner" color="white"  v-if="loading"/>{{$t('m.Login')}}</van-button>
                    </div>
                    <div class="login-error-box" v-if="loginLocked">
                        <p class="title">{{$t('m.Yourpasswordaccount')}}</p>
                        <p>{{$t('m.Youcan')}}:</p>
                        <p>-{{$t('m.loginbyfacebookorphonesms')}}</p>
                        <p>-{{$t('m.changeanewpassword')}}</p>
                    </div>
                    <!--邮箱登录-->
                    <!--<van-button type="default" class="facebook-btn sms-add-style"  @click="emailLogin = !emailLogin">-->
                    <!--<span class="buttonText">Email</span>-->
                    <!--</van-button>-->
                    <!--<van-popup v-model="emailLogin" class="email-login-box">-->
                    <!--<div class="text">-->
                    <!--<label for="email" class="label-class">{{$t('m.Email')}}</label>-->
                    <!--<input type="text" v-model="email" @input="setEmailError()" id="email" v-bind:class="{'text-danger': emailError }" class="input-class email-input" />-->
                    <!--<span v-if="emailError" style="color: #fa5555;">Invalid email</span>-->
                    <!--</div>-->
                    <!--<div class="password-box"  v-if="!seePassword">-->
                    <!--<label for="password" class="label-class">{{$t('m.Password')}}</label>-->
                    <!--<div class="password-inside-box">-->
                    <!--<input type="password" v-model="password" @input="setPasswordError" id="password" v-bind:class="{'text-danger': passwordError }" class="input-class password-input" />-->
                    <!--<span class="password-icon" :style="passwordIcon" @click="setSee()"></span>-->
                    <!--</div>-->
                    <!--<span v-if="passwordError" style="color: #fa5555;">At least 8 or more characters.</span>-->
                    <!--</div>-->
                    <!--<div class="password-box"  v-else>-->
                    <!--<label for="password1" class="label-class">{{$t('m.Password')}}</label>-->
                    <!--<div class="password-inside-box">-->
                    <!--<input type="text" v-model="password" @input="setPasswordError" id="password1" v-bind:class="{'text-danger': passwordError }" class="input-class password-input" />-->
                    <!--<span class="password-icon" :style="passwordIcon1" @click="setSee()"></span>-->
                    <!--</div>-->
                    <!--<span v-if="passwordError" style="color: #fa5555;">At least 8 or more characters.</span>-->
                    <!--</div>-->
                    <!--<a href="javascript:;" class="login-page-a" v-if="tabIndex == 1" @click="forgotShow = true">{{$t('m.ForgotPassword')}}</a>-->
                    <!--<div class="login-btn">-->
                    <!--<van-button size="large" class="btn" v-if="tabIndex == 0" @click="registerWithEmail()" :disabled="loadingRegister"><van-loading class="login-loading" type="spinner" color="white"  v-if="loadingRegister"/>{{$t('m.Register')}}</van-button>-->
                    <!--<van-button size="large" class="btn" v-else @click="loginWithEmail()" :disabled="loading"><van-loading class="login-loading" type="spinner" color="white"  v-if="loading"/>{{$t('m.Login')}}</van-button>-->
                    <!--</div>-->
                    <!--</van-popup>-->
                </div>
            </van-tab>
        </van-tabs>


        <!--<van-popup v-model="forgotShow" class="forgot-box">-->
            <!--<div class="login-box-inside">-->
                <!--<div class="email-box">-->
                    <!--<label for="emailForgot" class="label-class">{{$t('m.Email')}}</label>-->
                    <!--<input type="text" v-model="emailForgot" @input="setEmailForgotError()" id="emailForgot"-->
                           <!--v-bind:class="{'text-danger': emailForgotError }" class="input-class email-input"/>-->
                    <!--<span v-if="emailForgotError" style="color: #fa5555;">Invalid email</span>-->
                <!--</div>-->
                <!--<div class="login-btn">-->
                    <!--<van-button size="large" class="btn" @click="forgotEmailPassword()" :disabled="popupLoading">-->
                        <!--<van-loading class="login-loading" type="spinner" color="white" v-if="popupLoading"/>-->
                        <!--{{$t('m.Next')}}>-->
                    <!--</van-button>-->
                <!--</div>-->
            <!--</div>-->
        <!--</van-popup>-->

    </div>
</template>

<script>
    import {
        loginWithFaceBook,
        loginWithPassAndName,
        registerWithFaceBook,
        registerUserWithEmail,
        forgotEmailPassword,
        getUserInfo,
        registerWithFaceBookSMS,
        loginWithFaceBookSMS
    } from '../../static/api/mgc_api'
    import Qs from 'qs'
    import {Toast} from 'vant'
    import axios from 'axios'

    export default {
        name: 'loginRegister',
        data() {
            return {
                facebookIcon: {
                    backgroundImage: "url(" + require("../../static/img/images/fb-icon.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100% 100%",
                    backgroundPositionX: "center",
                    backgroundPositionY: "center",
                },
                passwordIcon: {
                    backgroundImage: "url(" + require("../../static/img/images/password-eye.png") + ")",
                    backgroundRepeat: "no-repeat",
                    // backgroundSize: "80% 80%",
                    backgroundPositionX: "center",
                    backgroundPositionY: "center",
                },
                passwordIcon1: {
                    backgroundImage: "url(" + require("../../static/img/images/password-eye1.png") + ")",
                    backgroundRepeat: "no-repeat",
                    // backgroundSize: "80% 80%",
                    backgroundPositionX: "center",
                    backgroundPositionY: "center",
                },
                tabIndex: 0, //0:register;1:login
                emailError: false,
                passwordError: false,
                seePassword: false,
                loading: false,
                loadingRegister: false,
                emailLogin: false,
                forgotShow: false,
                popupLoading: false,
                email: '',
                password: '',
                emailForgot: '',
                emailForgotError: false,
                redirect: '',

                // 账号密码登录新增
                userName: '',
                nameError: false,
                loginLocked: false,
            }
        },
        methods: {
            setSee() {
                this.seePassword = !this.seePassword
            },
            // setEmailError() {
            //     let reg = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/
            //     if (this.email.match(reg)) {
            //         this.emailError = false
            //     }
            // },
            setPasswordError() {
                let reg = /^(?=.*?[0-9]).{8,}$/
                if (this.password.match(reg)) {
                    this.passwordError = false
                }
            },
            // setEmailForgotError() {
            //     let reg = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/
            //     if (this.emailForgot.match(reg)) {
            //         this.emailForgotError = false
            //     }
            // },
            setNameError() {
                // let reg = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/
                // if (this.userName.match(reg)) {
                //     this.nameError = false
                // }
                let userName = this.$translateLang(this.userName,'zawgyiTounicode')
                if (userName.length >= 5 && userName.length <= 20) {
                    this.nameError = false;
                }
            },

            // test add
            faceBookLogintest() {
                let response = {
                    id: '10155513055201893',
                    token_for_business: 'AbwKygaIJ_eYIiav',
                }
                this.loginWithFaceBookLast(response)
            },
            // 調用FaceBook登錄按鈕
            faceBookLogin() {
                if (window.android) {
                    window.android.loginFacebook()
                    return false
                }

                // 判断是否为rn
                if(window.isRNWebView){
                    let sendData = {
                        type: 1
                    }
                    window.postMessage(JSON.stringify(sendData));

                    document.addEventListener("message", (event)=>{
                        // let data = JSON.stringify(event.data)
                        // alert('web用户信息'+ event.data)

                        this.loginWithFaceBookLast(JSON.parse(event.data))
                    }, false);
                }else{
                    window.FB.login((response) => {
                        this.statusChangeCallback(response)
                    }, {scope: 'public_profile'});
                }
            },
            statusChangeCallback(response) {
                if (response.status === 'connected') {
                    FB.api('/me?fields=name,picture,token_for_business ', (response) => { // /me为API指定的调用方法，用于获取登陆用户相关信息
                        if (response.id) {
                            // console.log(response,'responseresponse')
                            this.loginWithFaceBookLast(response)
                        } else {
                            this.$toast('error,please try again later')
                        }
                    })
                } else {
                    this.$toast(response.status)
                }
            },
            //第三方Facebook 登录注册
            loginWithFaceBookLast(response) {
                // console.log(response)
                let toastL = '';
                    toastL = this.$toast({
                        type: 'loading',
                        mask: true,
                        duration: 0
                    });

                if (response) {
                    if (this.tabIndex == 0) {
                        let facebookId = response.id;
                        let tokenForBusiness = response.token_for_business;
                        let facebookName = response.name || '';
                        let facebookLogo = response.picture.data.url || '';
                        let data = {
                            'facebookId': facebookId,
                            'facebookName': facebookName,
                            'facebookLogo': facebookLogo,
                            'tokenForBusiness': tokenForBusiness,
                        }
                        let params = Qs.stringify(data);
                        registerWithFaceBook(params).then((res) => {
                            toastL.clear();
                            if (res.data) {
                                var data = res.data
                                // let mes = JSON.parse(res.data.message)
                                if (data.errorID === 0) {
                                    Toast.success('Successful')
                                    this.callbackLoginRegister(data.object)
                                } else {
                                    this.$toast(data.message)
                                }
                            }
                        }).catch((error) => {
                            console.log(error)
                            toastL.clear();
                            this.$toast('No internet, please try again')
                        })
                    } else {
                        let facebookId = response.id
                        let tokenForBusiness = response.token_for_business
                        let data = {
                            'facebookId': facebookId,
                            'tokenForBusiness': tokenForBusiness,
                        }
                        let params = Qs.stringify(data)
                        loginWithFaceBook(params).then((res) => {
                            toastL.clear();
                            if (res.data) {
                                let data = res.data
                                // let mes = JSON.parse(res.data.message)
                                if (data.errorID === 0) {
                                    this.callbackLoginRegister(data.object)
                                } else if (data.errorID === 100012) {
                                    this.$dialog.alert({
                                        message: 'You have not registered yet, please create a new account',
                                        confirmButtonText: 'OK'
                                    })
                                } else {
                                    this.$toast(data.message)
                                }
                            }
                        }).catch((error) => {
                            console.log(error)
                            toastL.clear();
                            this.$toast('No internet, please try again')
                        })
                    }

                }
            },
            // registerWithEmail () {
            //     //校验表单开始
            //     // 备用 let reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
            //     let regEmail = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/
            //     let regPassword = /^(?=.*?).{8,}$/
            //     let emailIsCanSubmit = false
            //     let passwordIsCanSubmit = false
            //     if (!this.email.match(regEmail)) {
            //         this.emailError = true
            //     } else {
            //         emailIsCanSubmit = true
            //     }
            //     if (!this.password.match(regPassword)) {
            //         this.passwordError = true
            //     } else {
            //         passwordIsCanSubmit = true
            //     }
            //     if (!emailIsCanSubmit || !passwordIsCanSubmit) return false
            //     //校验表单结束
            //
            //     let data = {
            //         'accountEmail': this.email,
            //         'password': this.password
            //     }
            //     let params = Qs.stringify(data)
            //     this.loadingRegister = true
            //     registerUserWithEmail(params)
            //         .then((res) => {
            //             if (res.data) {
            //                 var data = res.data
            //                 // let mes = JSON.parse(res.data.message)
            //                 if (data.errorID === 0) {
            //                     // this.$toast('register success')
            //                     this.$dialog.alert({
            //                         message: 'Check your email inbox. If you don\'t receive an email, and it\'s not in your spam folder this could mean you signed up with a different address.',
            //                         confirmButtonText: 'OK'
            //                     })
            //                     this.loadingRegister = false
            //                 } else {
            //                     this.$toast(data.message)
            //                     this.loadingRegister = false
            //                 }
            //             }
            //         })
            //         .catch((error) => {
            //             this.loadingRegister = false
            //             this.$toast('error,please try again later')
            //         })
            // },
            // 登录
            loginWithUserName () {
                //校验表单开始
                let regPassword = /^(?=.*?[0-9]).{8,}$/
                // if (!this.userName.match(regName)) {
                //     this.nameError = true
                //     return false
                // }
                let userName = this.$translateLang(this.userName,'zawgyiTounicode')
                if (userName.length < 5 || userName.length > 20) {
                    this.nameError = true;
                    return false
                }
                let password = this.$translateLang(this.password,'zawgyiTounicode')
                if (!password.match(regPassword)) {
                    this.passwordError = true
                    return false
                }
                //校验表单结束
                let data = {
                    'account': userName,
                    'password': password
                }
                    let params = Qs.stringify(data)
                    this.loading = true
                    loginWithPassAndName(params)
                        .then((res) => {
                            if (res.data) {
                                var data = res.data
                                // let mes = JSON.parse(res.data.message)
                                if (data.errorID === 0) {
                                    this.callbackLoginRegister(data.object)
                                } else if (data.errorID === 100012) {
                                    this.$dialog.alert({
                                        message: 'You have not registered yet, please create a new account',
                                        confirmButtonText: 'OK'
                                    })
                                } else if (data.errorID === 100016) {
                                    this.loginLocked = true
                                    this.$toast(data.message)
                                } else if (data.errorID === 100007) {
                                    this.$toast('error username or password')
                                } else {
                                    this.$toast(data.message)
                                }
                                this.loading = false
                            }
                        })
                        .catch((error) => {
                            this.loading = false
                            this.$toast('No internet, please try again')
                        })
                },
            // loginWithEmail () {
            //     //校验表单开始
            //     // 备用 let reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
            //     let regEmail = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/
            //     let regPassword = /^(?=.*?).{8,}$/
            //     let emailIsCanSubmit = false
            //     let passwordIsCanSubmit = false
            //     if (!this.email.match(regEmail)) {
            //         this.emailError = true
            //     } else {
            //         emailIsCanSubmit = true
            //     }
            //     if (!this.password.match(regPassword)) {
            //         this.passwordError = true
            //     } else {
            //         passwordIsCanSubmit = true
            //     }
            //     if (!emailIsCanSubmit || !passwordIsCanSubmit) return false
            //     //校验表单结束
            //
            //     let data = {
            //         'account': this.email,
            //         'password': this.password
            //     }
            //     let params = Qs.stringify(data)
            //     this.loading = true
            //     loginWithPassAndName(params)
            //         .then((res) => {
            //             if (res.data) {
            //                 var data = res.data
            //                 // let mes = JSON.parse(res.data.message)
            //                 if (data.errorID === 0) {
            //                     this.callbackLoginRegister(data.object)
            //                     this.loading = false
            //                 } else if (data.errorID === 100012) {
            //                     this.$dialog.alert({
            //                         message: 'You have not registered yet, please create a new account',
            //                         confirmButtonText: 'OK'
            //                     })
            //                     this.loading = false
            //                 } else {
            //                     this.$toast(data.message)
            //                     this.loading = false
            //                 }
            //             }
            //         })
            //         .catch((error) => {
            //             this.loading = false
            //             this.$toast('error,please try again later')
            //         })
            // },
            // forgotEmailPassword() {
            //     this.$router.push('resetresult')
            //     let regEmail = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/
            //     if (!this.emailForgot.match(regEmail)) {
            //         this.emailForgotError = true
            //         return false
            //     }
            //     //校验表单结束
            //
            //     let data = {
            //         'account': this.emailForgot,
            //     }
            //     let params = Qs.stringify(data)
            //     this.popupLoading = true
            //     forgotEmailPassword(params)
            //         .then((res) => {
            //             if (res.data) {
            //                 var data = res.data
            //                 if (data.errorID === 0) {
            //                     this.popupLoading = false
            //                     this.forgotShow = false
            //                     this.$router.push('resetresult')
            //                 } else {
            //                     this.$toast(data.message)
            //                     this.popupLoading = false
            //                 }
            //             }
            //         })
            //         .catch((error) => {
            //             this.popupLoading = false
            //             this.$toast('error,please try again later')
            //         })
            // },
            callbackLoginRegister(info) {
                let _info = info || ''
                let token = _info.token
                // this.setCookie(token)
                localStorage.setItem("userToken", token);
                this.setNewLocalUserInfo(_info.info)
                this.$store.commit('store/updateIsLogin', true)
                this.$router.push('/')
                // if (this.redirect && this.redirect !== '/user/myaccount') {
                //     this.$router.push(this.redirect)
                // } else {
                //     this.$router.push('/')
                // }
                // 登录新增传token
                axios.defaults.headers.common['token'] = token
            },
            //新增 facebook SMS start
            initAccountKit() {
                const tag = document.createElement('script')
                tag.setAttribute(
                    'src',
                    `https://sdk.accountkit.com/en_US/sdk.js`
                )
                tag.setAttribute('id', 'account-kit')
                tag.setAttribute('type', 'text/javascript')
                tag.onload = () => {
                    /* eslint-disable camelcase */
                    window.AccountKit_OnInteractive = this.onLoad.bind(this)
                    /* eslint-enable camelcase */
                }
                document.head.appendChild(tag)
            },
            onLoad() {
                window.AccountKit.init(
                    {
                        appId: "383669555472204",
                        state: '1212111',
                        version: "v1.1",
                        display: "modal",
                        fbAppEventsEnabled: true,
                    }
                )
            },
            // login callback
            loginCallback(response) {
                // console.log(response,'response')
                if (response.status === "PARTIALLY_AUTHENTICATED") {
                    var code = response.code;
                    // var csrf = response.state;
                    // Send code to server to exchange for access token
                    let data = {
                        'code': code,
                        // 'csrf': csrf
                    }
                    let params = Qs.stringify(data)
                    let toastL = '';
                    toastL = this.$toast({
                        type: 'loading',
                        mask: true,
                        duration: 0
                    });
                    if (this.tabIndex == 0) {
                        registerWithFaceBookSMS(params).then((res) => {
                            toastL.clear();
                            if (res.data) {
                                var data = res.data
                                // let mes = JSON.parse(res.data.message)
                                if (data.errorID === 0) {
                                    // this.$toast('register success')
                                    Toast.success('Successful')
                                    this.callbackLoginRegister(data.object)
                                } else {
                                    this.$toast(data.message)
                                }
                            }
                        }).catch((error) => {
                            toastL.clear();
                            console.log(error)
                            this.$toast('No internet, please try again')
                        })
                    } else {
                        loginWithFaceBookSMS(params)
                            .then((res) => {
                                toastL.clear();
                                if (res.data) {
                                    var data = res.data
                                    // let mes = JSON.parse(res.data.message)
                                    if (data.errorID === 0) {
                                        this.callbackLoginRegister(data.object)
                                    } else if (data.errorID === 100012) {
                                        this.$dialog.alert({
                                            message: 'You have not registered yet, please create a new account',
                                            confirmButtonText: 'OK'
                                        })
                                    } else {
                                        this.$toast(data.message)
                                    }
                                }
                            })
                            .catch((error) => {
                                toastL.clear();
                                this.$toast('No internet, please try again')
                            })
                    }
                }
                else if (response.status === "NOT_AUTHENTICATED") {
                    console.log('Not Authenticated')
                }
                else if (response.status === "BAD_PARAMS") {
                    this.$toast('Bad Params')
                }
            },

            // phone form submission handler
            smsLogin() {
                window.AccountKit.login('PHONE', {}, this.loginCallback)
            },
            //新增 facebook SMS end
            // 保存用户信息
            setNewLocalUserInfo(i) {
                let _userInfo = JSON.stringify(i)
                localStorage.setItem("userInfo", _userInfo);
            },
            //设置cookie
            setCookie(token) {
                var exdate = new Date();//获取时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * 360 * 2);//保存的天数,暂设两年
                //字符串拼接cookie
                window.document.cookie = "token" + "=" + token + ";path=/;expires=" + exdate.toGMTString();
            },
            androidLoginFacebookResult(response){
                if (!response) return false
                this.loginWithFaceBookLast(response)
            }
        },
        mounted() {
            if (!window.AccountKit) {
                this.initAccountKit()
            }
            this.redirect = this.$route.query.redirect || ''
        },
        created() {
            this.$androidMethods.androidLoginFacebookResult = this.androidLoginFacebookResult
        },
    };
</script>
<style>
    .login-or {
        margin: 15px 0;
    }

    .login-tilte.van-nav-bar {
        background-color: #f2f2f2;
    }

    .login-tilte.van-nav-bar .van-icon {
        color: #bdbdbd;
    }

    .login-tilte.van-hairline--bottom:after {
        border-bottom: 0;
    }

    .login-or .or-outside {
        margin: 10px 0;
        /*border-bottom: 2px solid #8D8D8D;*/
    }

    .login-or .or-inside {
        line-height: 22px;
        text-align: center;
        color: #8D8D8D;
    }

    .login-btn {
        height: 45px;
        margin-top: 35px;
    }

    .login-page-a {
        float: right;
        color: rgb(14, 108, 156);
        text-decoration: underline;
        font-size: 14px;
        margin-top: 8px;
    }

    .login-btn .btn {
        background-color: rgb(255, 153, 0);
        border: 0;
        color: #fff;
        border-radius: 0px;
        width: 100%;
        height: 100%;
        line-height: 1;
    }

    .login-btn .van-button--disabled.btn {
        color: #999;
    }

    .forgot-box .login-box-inside {
        padding: 12px 16px;
    }

    .forgot-box .login-box-inside .login-btn {
        height: 42px;
        margin-top: 24px;
    }

    .password-inside-box {
        position: relative;
    }

    .password-inside-box .password-icon {
        position: absolute;
        right: 0;
        width: 40px;
        height: 40px;
        bottom: 0;
        background-size: 50% 50%;
    }

    .forgot-box {
        width: 80%;
    }

    .input-class {
        -webkit-appearance: none;
        background-color: #fff;
        border: 1px solid #d8dce5;
        box-sizing: border-box;
        color: #5a5e66;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 1;
        outline: 0;
        padding: 0 15px;
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        width: 100%;
    }

    .input-class.text-danger {
        border: 1px solid #fa5555;
    }

    .password-input {
        padding-right: 42px;
    }

    input {
        text-rendering: auto;
        color: initial;
        letter-spacing: normal;
        word-spacing: normal;
        text-transform: none;
        text-indent: 0px;
        text-shadow: none;
        display: inline-block;
        text-align: start;
        margin: 0em;
        font: 400 13.3333px Arial;
        -webkit-appearance: textfield;
        background-color: white;
        -webkit-rtl-ordering: logical;
        cursor: text;
        padding: 1px;
        border-width: 2px;
        border-style: inset;
        border-color: initial;
        border-image: initial;
    }

    .login-loading {
        display: inline-block;
        margin-right: 8px;
        margin-left: -10px;
    }

    .label-class {
        text-align: left;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #5a5e66;
        line-height: 32px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
    }

    .label-class:after {
        content: "*";
        color: #fa5555;
        margin-left: 4px;
    }

    .content-box {
        padding: 0 15px;
    }

    .login-box .toolbar {
        box-shadow: none;
        color: #444;
    }

    .login-box .title-text {
        color: #444 !important;
        margin: 0 auto !important;
        padding-right: 46px;
    }

    .choice-btn {
        width: 100%;
        margin: 0;
        height: 42px;
        border-radius: 5px;
        border: thin solid #888 !important;
        text-transform: none !important;
        color: #444 !important;
        margin-top: 12px;
        font-weight: 400;
    }

    .choice-btn a {
        display: block;
        height: 40px;
        line-height: 40px;
        text-decoration: none;
        color: #444;
        text-align: center;
    }

    .telphone-btn.btn {
        color: #444;
        border-radius: 5px;
        border: thin solid #888 !important;
        font-weight: 400;
    }

    .footer-telphone > :last-child {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .footer-telphone {
        background: #fff !important;
    }

    .footer-telphone .text-xs-center {
        color: #444;
    }

    .login-box .van-tabs__line {
        background-color: #FF9900;
    }

    .login-box .van-tab--active {
        color: #FF9900;
    }

    .login-box-inside {
        padding: 12px 16px 0 16px;
    }

    span.label {
        font-family: serif;
        font-weight: normal;
    }

    span.icon {
        display: inline-block;
        vertical-align: middle;
        width: 42px;
        height: 42px;
        float: left;
    }

    span.buttonText {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        font-family: 'Roboto', sans-serif;
        display: block;
        padding: 0 43px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        color: #000;
    }

    .facebook-btn {
        /*background-color: #3b5998;*/
        /*border:1px solid #666666;*/
        border: 1px solid #3b5998;
        color: #fff;
        position: relative;
        border-radius: 5px;
        display: block;
        width: 100%;
    }

    .facebook-back {
        background-color: #3b5998 !important;

    }

    .facebook-back span.buttonText {
        color: #fff;
    }

    .sms-add-style {
        margin-bottom: 15px;
    }

    .email-login-box {
        width: 90%;
        padding: 20px 15px;
        box-sizing: border-box;
    }
    .index-page-a{
        color:rgb(14, 108, 156);
    }
    .terms-policy{
        line-height: 22px;
    }
    .login-error-box{
        margin: 40px 0;
    }
    .login-error-box p {
        margin: 0;
    }
    .login-error-box p.title {
        margin-bottom: 20px;
    }
</style>
